<template> 
  <div class="app-container">
        <el-card v-loading="loading" class="filter-container" shadow="never">
      <div style="margin-top: 15px">
        <el-form :model="shopConfig" :rules="rules" ref="shopConfig" size="small" label-width="140px">
          <el-form-item :label= "shopConfig.mallNameRemark"  prop="mallNameValue">
            <el-input class="input" v-model="shopConfig.mallNameValue"></el-input>
          </el-form-item>
          
          <el-form-item :label= "shopConfig.servicePhoneNumberRemark" prop="servicePhoneNumberValue">
            <el-input class="input" v-model="shopConfig.servicePhoneNumberValue"></el-input>
          </el-form-item>

          

          <el-form-item :label= "shopConfig.shopDeliveryPriceRemark" prop="shopDeliveryPriceValue">
            <el-input class="input" v-model="shopConfig.shopDeliveryPriceValue"></el-input>
              
          </el-form-item>

          <el-form-item :label= "shopConfig.couponsTitlePicStrRemark" prop="couponsTitlePicStrValue">
            <el-input class="input" v-model="shopConfig.couponsTitlePicStrValue"></el-input>
          </el-form-item>

          <el-form-item :label= "shopConfig.finderRecommendTitleRemark" prop="finderRecommendTitleValue">
            <el-input class="input" v-model="shopConfig.finderRecommendTitleValue"></el-input>
          </el-form-item>

          <el-form-item :label= "shopConfig.shopPromptRemark" prop="shopPromptValue">
            <el-input class="input" autosize
                type="textarea"
               
                v-model="shopConfig.shopPromptValue"
              >
              </el-input>
          </el-form-item>

          <el-form-item :label= "shopConfig.shopDeliveryRemark" prop="shopDeliveryValue">
            <el-input class="input"
            autosize
                type="textarea"
               
                v-model="shopConfig.shopDeliveryValue"
              >
              </el-input>
          </el-form-item>
          
          <el-form-item :label= "shopConfig.aboutUsTitleRemark" prop="aboutUsTitleValue">
            <el-input class="input" v-model="shopConfig.aboutUsTitleValue"></el-input>
          </el-form-item>

          <el-form-item :label= "shopConfig.aboutUsContentRemark" prop="aboutUsContentValue">
            <el-input class="input"
                type="textarea"
               
                autosize
                v-model="shopConfig.aboutUsContentValue"
              >
              </el-input>
            
          </el-form-item>

<el-form-item>
    <el-button type="primary" @click="submitForm('shopConfig')">确认修改</el-button>
    <el-button @click="resetForm('shopConfig')">重置</el-button>
  </el-form-item>

        </el-form>
      </div>
    </el-card>
    </div>
</template>
<script>
  
  import {getConfig,setConfig} from '@/api/shop'

  export default {
    name: "config",
    components:{},
    data() {
      return {
          loading: true,
          shopConfig:{
            shopDeliveryPriceValue:''
          },
          rules: {
          mallNameValue: [
            { required: true, message: '请输入内容', trigger: 'blur' },
            { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
          ],
          servicePhoneNumberValue: [
            { required: true, message: '请输入内容', trigger: 'blur' },
            { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
          ],
          shopDeliveryPriceValue: [
            { required: true, message: '请输入内容', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
          ],
          aboutUsTitleValue: [
            { required: true, message: '请输入内容', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
          ],
          couponsTitlePicStrValue: [
            { required: true, message: '请输入内容', trigger: 'blur' },
            { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
          ],
          finderRecommendTitleValue: [
            { required: true, message: '请输入内容', trigger: 'blur' },
            { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
          ],
          shopPromptValue: [
            { required: true, message: '请输入内容', trigger: 'blur' },
            { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
          ],
          shopDeliveryValue: [
            { required: true, message: '请输入内容', trigger: 'blur' },
            { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
          ],
          aboutUsContentValue: [
            { required: true, message: '请输入内容', trigger: 'blur' },
            { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
          ],
        }
      }
    },
    created() {
     this.getConf();
    },
   
    methods: {
      submitForm(formName) {
        var _this = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var data = _this.shopConfig
            setConfig(data).then(res => {
              if(res.code == 200){
                this.$message({
                type: 'success',
                message: '提交成功',
                duration:1000
              });
              this.getConf()
              }
            })
          } else {
            this.$message({
              message: '内容填写不完完整！',
              type: 'error',
              duration:1000
            });
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.getConf();
      },
      getConf(){
      var _this = this
      if(!_this.loading){
        _this.loading = true
      }
      getConfig().then(res =>{
        if(res.code == 200){
          _this.shopConfig = res.data
          _this.loading = false
          console.log(_this.shopConfig)
        }
      })
    }
    },
    
  }
</script>
<style scoped>
  .input{
    width: 500px;
  }
</style>


